<script setup lang="ts">
import logoBar from "./left-part/logo-bar/index.vue";
import menuBar from "./left-part/menu-bar/index.vue";
import _service from "../service/host";
import {  ref } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
const { locale } = useI18n();
const currentLang = ref("zh-CN");
const changeLang = () => {
  // ...
  // 这句话就是关键
  currentLang.value = currentLang.value === "zh-CN" ? "en-US" : "zh-CN";
  locale.value = currentLang.value; 
  localStorage.setItem("lang", currentLang.value);

};


const deepClone = (obj: {
  [x: string]: any;
  a?: number;
  b?: string;
  c?: boolean;
  d?: undefined;
  e?: null;
  f?: number[];
  g?: { a: string };
  h?: symbol;
  i?: bigint;
}) => {
  let tar = obj instanceof Array ? [] : {};
  for (const i in obj) {
    if (typeof obj[i] === "object" && obj[i] !== null) {
      tar[i] = obj[i] instanceof Array ? [] : {};
      tar[i] = deepClone(obj[i]);
    } else {
      tar[i] = obj[i];
    }
  }
  return tar;
};
const router = useRouter()
const backToLogin = () => {
  router.push({
    path:'/login'
  })
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="250px">
        <logo-bar></logo-bar>
        <menu-bar></menu-bar>
      </el-aside>
      <el-container>
        <el-header>
          <div>头部左侧内容</div>
          <div>

            <el-button @click="changeLang">{{ currentLang }}</el-button>
            <!-- {{ locale("button.add") }} -->
            <el-button @click="backToLogin">退出登陆</el-button>
          </div>
        </el-header>
        <el-main>
        <router-view></router-view>  
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style lang="scss" scoped>
.common-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  .el-aside {
    background-color: #fff;
  }
  .el-header {
    background-color: #afa5e1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .el-main {
    background-color: #f4f5f6;
  }
}
</style>
